<template>
	<view class="box">
		<view class="bg">
			<view class="name" v-if="info.rank != 0 ">
				{{info.team_number_desc}}
			</view>
			<image class="vipbg"
				src="https://images.fudiemall.com/storage/default/20250114/vipbgs4c3e4b270df1f21ba1a499434363f873e6cb7824.png"
				mode="aspectFill"></image>
			<image class="limit" v-if="info.rank != 0 " :src="baseUrl +'/static/icon/limit.png'" mode="aspectFill"></image>
			<view class="vipname">
				{{info.name}}
			</view>
			<view class="num">
				编号 #{{info.system_code}}
			</view>
			<!-- <view class="btn1" @click="changeflag">
				专属任务
			</view> -->
			<image class="vipmall" :src="info.images" mode="aspectFill"></image>
		</view>
		<view class="tit">
			<text class="left">专属任务</text>
			<view class="right" @click="gopromotionbonus">
				<text>活动说明</text>
				<image style="margin-left: 20rpx;" :src="baseUrl + '/static/icon/right.png'" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 		<view class="wrap"    v-for="(item,index) in info.permission" :key="item.desc">
			<view class="top">
				<text class="title" :style="{ opacity: item.expiration === 1 ? 1 : 0.5 }"  >{{item.title}}</text>
				<text class="time"  :style="{ opacity: item.expiration === 1 ? 1 : 0.5 }" v-if="item.expiration==1" >{{item.expiration_date}}</text>
				<text class="times" @click="changeflag" v-if="item.expiration==0" >{{item.expiration_date}}</text>
				<view class="btns" :style="{ opacity: item.expiration === 1 ? 1 : 0.5 }" v-if="item.is_invite==1"  @click="goinvite">
					去邀请
				</view>
			</view>
			<view class="center"  :style="{ opacity: item.expiration === 1 ? 1 : 0.5 }">
				{{item.desc}}
			</view>
			<view class="bot" :style="{ opacity: item.expiration === 1 ? 1 : 0.5 }"  >
				<view class="left"    v-if="item.is_show_three==0">
					<text class="sss"  >{{item.one}}</text>
				</view>
				<view class="right"  v-if="item.is_show_three==0">
					<text  class="sss"   >{{item.two}} </text>
					
				</view>
				<view class="left" v-if="item.is_show_three==1" >
					<text  class="sss"  >{{item.three}}  </text>
					
				</view>
			</view>
		</view> -->
		<view class="taskwrap">
			<!-- <view class="tits">
				专属任务
			</view> -->
			<view class="taskitem" v-for="item in info.work" :key="item.after">
				<view class="taskitemtop">
					<image :src="item.icon" mode="aspectFill"></image>
					<text>{{item.title}}</text>
					<!-- <text class="tag">{{item.surplus_quota}}</text> -->
				</view>
				<view class="allwrap">
					<view class="progess">
						<view class="bgg">

						</view>
						<u-line-progress height="10" class="ssss" :percentage="(item.before/item.after)*100"
							inactiveColor="rgba(102,178,80,0)" :showText="false"
							activeColor="#FFC400"></u-line-progress>
					</view>
					<text class="price">{{item.before}}/{{item.after}} </text>
				</view>
				<view class="tip" style="color: #999;">
					任务内容:
				</view>
				<view class="tip">
					{{item.content}}
				</view>
				<view class="btnss" v-if="item.type==0&&item.is_success==0" @click="gonexts(item.type)">
					去完成
				</view>
				<view class="btnss" v-if="item.type==1&&item.is_success==0" @click="gonexts(item.type)">
					去购买
				</view>
				<view class="btnss" v-if="item.type==2&&item.is_success==0" @click="gonexts(item.type)">
					去完成
				</view>
				<view class="btnss" v-if="item.type==3&&item.is_success==0" @click="gonexts(item.type)">
					去申请
				</view>
				<view class="btnss" v-if="item.type==4&&item.is_success==0" @click="gonexts(item.type,item.goods_id)">
					去购买
				</view>
				<view class="btnss2" v-if="item.is_success==1" >
					已完成
				</view>
			</view>
			<view class="nodatas" v-if="info.work.length==0">
				<image :src="baseUrl + '/static/image/noData1.png'" mode="aspectFill"></image>
				<text>全新专属任务敬请期待</text>
			</view>
			<view class="empty3">
				
			</view>
		</view>
		<u-popup :show="tipShow" mode="center" @close="tipShow=false" :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<text class="popup-title h2"></text>
				<view class="popup-center">
					{{rule}}
				</view>

				<text class="btnss" @click="tipShow=false">确定</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		identity
	} from "../../api/user.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				flag: false,
				gropss2: "50",
				info: {
					work: []
				},
				tipShow: false,
				rule: ""
			}
		},
		onShow() {
			this.getinfo()
		},
		methods: {
			gopromotionbonus() {
				uni.navigateTo({
					url: "/pageUser/myuser/promotionbonusrule"
				})
			},
			getinfo() {
				identity().then(res => {
					if (res.code == 1) {
						this.info = res.data
					} else if (res.code == 0) {
						setTimeout(function() {
							uni.navigateBack()
						}, 1500);
					}
				})
			},
			changeflag() {
				this.flag = true
			},
			goinvite() {
				uni.navigateTo({
					url: "/pageUser/myuser/invitecodepage"
				})
			},
			gonexts(type,id) {
				if(type==1){
					uni.switchTab({
						url:"/pages/index/cloudCatIndex"
					})
				}else if(type==2){
					uni.navigateTo({
						url:"/pageUser/myuser/networkexpansion"
					})
				}else if(type==3){
					uni.navigateTo({
						url:"/pageUser/myuser/shopbuilder"
					})
				}else if(type==4){
					uni.navigateTo({
						url:"/pagesMy/cloudCat/goodsDetails?id="+id
					})
				}
				// uni.navigateTo({
				// 	url: "/pagesMy/cloudCat/secondLevelSearch?type=0&zoneType=1"
				// })
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		position: relative;
		width: 690rpx;
		height: 310rpx;
		margin: 0 auto;
		position: relative;
		margin-top: 20rpx;

		.vipbg {
			width: 690rpx;
			height: 310rpx;
		}

		.name {
			width: 162rpx;
			height: 50rpx;
			text-align: center;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
			font-weight: 400;
			font-size: 24rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}

		.vipname {
			position: absolute;
			top: 86rpx;
			left: 36rpx;
			font-weight: 500;
			font-size: 44rpx;
			color: #FFFFFF;
		}

		.limit {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			width: 162rpx;
			height: 50rpx;
		}

		.num {
			position: absolute;
			top: 154rpx;
			left: 36rpx;
			font-weight: 400;
			font-size: 22rpx;
			color: rgba(255, 255, 255, 0.8);
		}

		.btn1 {
			width: 168rpx;
			height: 58rpx;
			background: linear-gradient(270deg, #FFDD9A 0%, #FFCA7B 100%);
			border-radius: 368rpx 368rpx 368rpx 368rpx;
			text-align: center;
			line-height: 58rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #6F4000;
			position: absolute;
			bottom: 34rpx;
			left: 30rpx;
		}

		.vipmall {
			width: 200rpx;
			height: 310rpx;
			top: 24rpx;
			position: absolute;
			right: 10rpx;
		}
	}

	.tit {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 50rpx;

		.left {
			font-weight: 700;
			font-size: 34rpx;
			color: #3D3D3D;
		}

		.right {
			display: flex;
			align-items: center;

			>text {
				font-weight: 400;
				font-size: 24rpx;
				color: #999;
			}

			>image {
				width: 8rpx;
				height: 16rpx;
			}
		}
	}

	.allwrap {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.wrap {
		width: 690rpx;
		min-height: 254rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 18rpx;
		padding-bottom: 30rpx;

		.top {
			width: 644rpx;
			margin: 0 auto;
			height: 80rpx;
			position: relative;
			display: flex;
			align-items: center;

			.title {
				font-weight: 400;
				font-size: 30rpx;
				color: #3D3D3D;
			}

			.time {
				font-weight: 400;
				font-size: 26rpx;
				color: #FFC300;
				margin-left: 16rpx;
			}

			.times {
				font-weight: 400;
				font-size: 26rpx;
				color: #E78C4C;
				margin-left: 16rpx;
				opacity: 1 !important;
			}

			.btns {
				width: 142rpx;
				height: 46rpx;
				background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
				border-radius: 368rpx 368rpx 368rpx 368rpx;
				text-align: center;
				line-height: 46rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				position: absolute;
				right: 24rpx;
				top: 24rpx;
			}

		}

		.center {
			width: 644rpx;
			min-height: 72rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			margin: 0 auto;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
			padding-bottom: 20rpx;
		}

		.bot {
			width: 644rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			margin-top: 30rpx;

			.sss {
				font-weight: 500;
				font-size: 26rpx;
				color: #FFC300;
				margin-left: 10rpx;
			}
		}
	}

	.taskwrap {
		width: 750rpx;
		height: 812rpx;
		

		.tits {
			width: 750rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 30rpx;
			font-weight: 700;
			font-size: 36rpx;
			color: #3D3D3D;
		}

		.taskitem {
			width: 670rpx;
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			margin: 0 auto;
			margin-top: 50rpx;
			position: relative;
			padding: 24rpx;
			border-radius: 24rpx;
			background: #FFFFFF;

			.taskitemtop {
				font-weight: 400;
				font-size: 30rpx;
				color: #3D3D3D;
				// width: 720rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				>image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
				.tag {
					font-weight: 400;
					font-size: 24rpx;
					color: #F63418;
					margin-right: 15rpx;
					// margin-left: 30rpx;
				}
			}

			.progess {
				width: 290rpx;
				position: relative;
				height: 38rpx;

				.bgg {
					width: 280rpx;
					height: 30rpx;
					background: #FFB404;
					opacity: 0.2;
					border-radius: 120rpx 120rpx 120rpx 120rpx;
					position: absolute;
					top: 5rpx;
					left: 4rpx;
					/* #ifdef  MP-WEIXIN  */
					width: 300rpx;
					top: 4rpx;
					left: -6rpx;
					/* #endif */
				}

				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// margin-top: 28rpx;

				.ssss {
					position: relative;
					z-index: 99;
					margin-left: 15rpx;
					margin-right: 20rpx;
				}

			}
		}

		.btnss {
			width: 142rpx;
			height: 56rpx;
			background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
			border-radius: 368rpx 368rpx 368rpx 368rpx;
			text-align: center;
			line-height: 56rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			position: absolute;
			right: 20rpx;
			top: 24rpx;
		}
		.btnss2 {
			width: 142rpx;
			height: 56rpx;
		
			border-radius: 368rpx 368rpx 368rpx 368rpx;
			text-align: center;
			line-height: 56rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #999;
			position: absolute;
			right: 20rpx;
			top: 48rpx;
		}
	}

	.tip {
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
	}

	.price {
		display: flex;
		width: 200rpx;
		// position: absolute;
		// right: 150rpx;
		// top: 68rpx;
		margin-left: 50rpx;
		text-align: left;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFC300;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48rpx;
		width: 602rpx;
		max-height: 800rpx;
		overflow: auto;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		padding-bottom: 30rpx;

	}

	.popup-title {
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
	}

	.popup-center {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: auto;

		>image {
			margin-left: 14rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}

	.btnss {
		width: 264rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 280rpx 280rpx 280rpx 280rpx;
		text-align: center;
		line-height: 72rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top: 30rpx;
	}

	.nodatas {
		margin: 0 auto;
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		>image {
			width: 400rpx;
			height: 340rpx;
		}

		>text {
			margin-top: 30rpx;
			color: #333;
		}
	}
</style>